<template>
    <div id="box" :style="{height:isBoxHeight}">
        <el-card class="box-card-menu" shadow="never">
            <!--下面是内容部分 -->
            <div class="box-card-bodys">
                <tags-view-item />
                <transition name="fade-transform" mode="out-in">
                    <keep-alive :include="cachedViewsItem">
                        <router-view :key="key"></router-view>
                    </keep-alive>
                </transition>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import TagsViewItem from '@/views/layout/components/TagsViewItem.vue';
import navMenu from './navMenu';

export default {
    name: 'BusinessOperate',
    data() {
        return {
            myChart: null,
            isIndex: 1, // 更新视图用
            // activeMenu: 'fastSearch',
            indexMenus: [],
            // isBtnVal:'true',
            flages: true,
            isMenuData: '',//业务菜单数据

        };
    },
    components: {
        navMenu,
        TagsViewItem,
    },
    computed: {
        ...mapGetters([
            'sideBar', // 菜单列表信息
            'isChangeCard',
            'cachedViewsItem',
            'businessMenu', // 业务菜单
            'isUserInfoView',
            'visitedViewsItem',
            'globalVariable',
        ]),
        isBoxHeight() {
            if (this.globalVariable.isCoilIn) {
                let accountInfoHeight = this.globalVariable.accountInfoHeight + 5;
                accountInfoHeight < 90 ? accountInfoHeight = 90 : accountInfoHeight;
                let height = `calc(100% - ${accountInfoHeight}px)`
                return height;
            } else {
                let accountInfoHeight = this.globalVariable.accountInfoHeight - 20;
                accountInfoHeight < 160 ? accountInfoHeight = 160 : accountInfoHeight;
                let height = `calc(100% - ${accountInfoHeight}px)`
                return height;
            }
        },

        key() {
            const menuLinks = JSON.stringify(this.businessMenu);
            const menuvals = menuLinks.includes(this.$route.fullPath);
            // 防止大视图切换 影响到这里
            console.log(menuvals, 'menuvals');
            if (menuvals) {
                // this.isIndex 改变 key值也跟着变
                return this.$route.fullPath + this.isIndex;
            }
        },
    },
    watch: {
        isChangeCard() {
            if (this.isChangeCard) {
                this.isIndex += 1;
            }
        }
    },
    mounted() {
        // this.initCharts();
        // 给业务菜单 赋值
        this.isMenuData = Object.assign([], this.businessMenu)
        // this.getClickfunc();

    },
    methods: {

        // 更新routerView 的key值 这个方法是暴露给父级组件用的
        getIndexValue() {
            this.isIndex += 1;
        },

        // // 检查某个路由节点是叶子菜单还是非叶子菜单（叶子菜单：可以直接点击路由到某个链接）
        // 判断是叶子菜单 且还是业务菜单
        checkRouteTypeChild(route) {
            let routerLink = [];
            for (let i = 0; i < route.length; i++) {
                if (route[i].child && route[i].child.length > 0 && route[i].menuName == '业务系统') {
                    // 业务菜单数据修改 缓存整个业务菜单
                    this.$store.commit('menu/SET_BUSS_MENU', route[i].child);
                    Object.assign(routerLink, route[i].child);
                }
            }
            return routerLink;
        },

    },
};
</script>

<style lang='scss' >
#box {
    min-height: 300px;
    > .el-card {
        height: 100%;
        border: none;
        > .el-card__body {
            padding: 0;
            height: 100%;
            > .box-card-bodys {
                height: 100%;
                > div:nth-child(2) {
                    height: calc(100% - 55px);
                    overflow: hidden;
                    overflow-y: auto;
                    border: 1px solid #409eff;
                    border-radius: 6px;
                    margin: 10px 12px 6px;
                    padding: 5px;
                    > .cardComponent > .el-card {
                        > .el-card__body {
                            padding: 10px 5px 30px;
                        }
                    }
                    > .el-card {
                        > .el-card__body {
                            padding: 10px 5px 30px;
                        }
                    }
                }
                .el-card {
                    border: none;
                }
            }
        }
    }

    .box-card-menu {
        > .box-card-bodys {
            height: 100%;
        }
        .radioSty {
            .iconfont {
                background-color: #409eff;
                color: #fff;
                height: 40px;
                line-height: 40px;
                top: 1px;
            }
            .iconfont:hover {
                cursor: pointer;
            }

            .navMenu_head {
                li div {
                    font-size: 14px;
                    color: #333333;
                }
            }
        }
        #activeMenuId {
            position: relative;
            width: 10000px !important;
            margin-left: 20px;
            background-color: #e9f1fa;
            border: none;
            .navMenu_head {
                padding-bottom: 5px;
            }
        }

        .box-card-menu {
            .el-card__header {
                padding: 5px 10px 5px;
                .radioSty {
                    width: calc(100% - 68px);
                    display: inline-block;
                    margin-bottom: 0;
                }
            }
            & > .el-card__body {
                padding: 0;
                min-height: 50vh;
            }
        }
    }
}
</style>